<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d变换效果</title>
    <style>
        html,body{
            height: 100%;
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: yellow;

            /*perspective: 设置一个3D视图的透视距离.该属性需要添加在3D元素的父元素身上.*/
            perspective: 2000px;
            /*保留或添加3D效果.*/
            transform-style: preserve-3d;
            opacity: 0.7;
        }
        section{
            width: 280px;
            height: 280px;
            background-color: red;
            transform: rotateX(30deg);
            transform-origin: -50px 30px;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div>
        <section>
            
        </section>
    </div>
</body>
</html>